<template>
  <view class="h_card success_contant">
    <view class="row rows">
      <image src="@/assets/images/index/我要发货/shouye_icon_fahuo.png"></image>
      <view class="text">
        <view class="h">
          <view class="name">{{order.orderList.shipper }}</view>
          <view class="phone">{{order.orderList.shipperMobile }}</view>
        </view>
<!--        <view class="t">{{order.orderList.toProvince+order.orderList.toFromCity+order.orderList.toFromArea+order.orderList.toFromAdd}}</view>-->
        <view class="t">{{order.orderList.toFromAdd}}</view>
      </view>
    </view>
    <view class="row">
      <image src="@/assets/images/index/我要发货/shouye_icon_shouhuo.png"></image>
      <view class="text">
        <view class="h">
          <view class="name">{{order.orderList.receiver }}</view>
          <view class="phone">{{order.orderList.receiverMobile }}</view>
        </view>
<!--        <view class="t">{{order.orderList.fromProvince+order.orderList.fromCity+order.orderList.fromArea+order.orderList.fromAdd}}</view>-->
        <view class="t">{{order.orderList.fromAdd}}</view>
      </view>
    </view>
    <view class="success_div">
      <view class="success_div_row">
        <view class="success_div_row_left">预估费用：</view>
        <view class="success_div_row_right">￥{{ order.orderList.actualTotalCost}}</view>
        <!-- {{list.actualTotalCost }}} -->
      </view>
      <view class="success_div_row">
        <view class="success_div_row_left">下单时间：</view>
        <view>{{  dayjs(order.orderList.creaTetime).format("YYYY-MM-DD HH:mm:ss")}}</view>
      </view>
      <!-- <view class="success_div_row">
        <view class="success_div_row_left">接货时间：</view>
        <view>2022-10-24 15:02:30</view>
      </view> -->
    </view>
  </view>
  <view class="h_card base">
    <view class="trach_title">基本信息</view>
    <view class="contant">
      <view class="row">
        <view class="left">下单时间</view>
        <view class="right">{{  dayjs(order.orderList.creaTetime).format("YYYY-MM-DD HH:mm:ss")}}</view>
      </view>
      <view class="rows">
        <view class="lefts">
          <view class="left">承运类型</view>
          <view class="right">{{TransSendType()}}{{order.orderList.urgent == '0'?'':',加急'}}</view>
        </view>

        <view class="lefts">
          <view class="left">付款方式</view>
<!--          <view class="right">{{ order.orderList.pickUpMode == '1'?'自提':(order.orderList.pickUpMode == '2'?'送货':'直送') }}</view>-->
          <view class="right">{{ order.orderList.clearingForm == '1'?'现付':(order.orderList.clearingForm == '2'?'提付':'签单') }}</view>
        </view>
      </view>
      <view class="rows">
        <view class="lefts">
          <view class="left">接货方式</view>
          <view class="right">{{ order.orderList.isReceiving == '1'?'上门接货':'无需接货' }}</view>
        </view>

        <view class="lefts">
          <view class="left">保价声明</view>
          <view class="right">¥{{ order.orderList.insuredMoney }}</view>
        </view>
      </view>
      <view class="base_div" v-if="order.orderList.isReceiving == '1'">
        <image src="@/assets/images/index/icon_shangmenjiehuo.png"></image>
        <view class="text">
          <view class="top">上门接货时间</view>
          <view class="bottom">{{ timeCount() }}</view>
        </view>
      </view>
    </view>
  </view>
  <view class="h_card track_goods">
    <view class="trach_title">货物信息</view>
    <view class="goods_div" v-for="(item,index) in order.orderList.goodsInfo" :key="index">
      <view class="goods_content">
        <view class="left">{{item.goodsName }}{{item.goodsNumber }}件</view>
        <view class="left">{{item.weigh }}Kg，{{item.goodsVolume }}m³，{{item.packing }}</view>
      </view>
    </view>
  </view>

  <view class="h_card base">
    <view class="trach_title">提货信息</view>
    <view class="contant">
      <view class="rows">
        <view class="lefts">
          <view class="left">提货方式</view>
          <view class="right">{{ order.orderList.pickUpMode =='1'?'自提':(order.orderList.pickUpMode =='2'?'配送':'直送')}}</view>
        </view>

        <view class="lefts">
          <view class="left">直送服务</view>
          <view class="right">{{goodsType() }}</view>
        </view>
      </view>
      <view class="rows" v-if="order.orderList.dischargeCargo == '1'">
        <view class="lefts">
          <view class="left">卸货类型</view>
          <view class="right">{{ order.orderList.dischargeServer =='1'?'标准件':( order.orderList.dischargeServer =='2'?'非标件':'特殊件')}}</view>
        </view>

        <view class="lefts">
          <view class="left">楼层电梯</view>
          <view class="right">{{order.orderList.dischargeElevator == '1'?'全程电梯':'全程楼梯' }}</view>
        </view>
      </view>
      <view class="send_row" v-if="order.orderList.pickUpMode == '2'">
        <image src="@/assets/images/index/wangdian_img_peisongwangdian.png"></image>
        <view class="text">
          <view class="text1">{{order.orderList.destinationBranchName }}</view>
          <view class="text2">{{order.orderList.destinationAddress }}}</view>
          <view class="text3">距离收货地{{order.orderList.getGoodsMiles }}Km</view>
        </view>
        <view class="icon_group">
          <image src="@/assets/images/index/icon_wangdiandianhua.png"></image>
          <image src="@/assets/images/index/icon_wangdiandaohang.png"></image>
        </view>
      </view>
      <view class="sign_man" v-if="order.orderList.wxStatus>5">
        <image class="img" src="@/assets/images/index/qianshouren.png"></image>
        <view class="content">
          <view class="top">签收人</view>
          <view class="bottom">{{ order.orderList.wxCustomerName }} {{ order.orderList.wxPhone }}</view>
        </view>
        <view class="info" @click="showSignInfo({})">详细信息＞</view>
      </view>
    </view>
  </view>

  <view class="h_card base" v-if="order.orderList.collectionPayment == '1'">
    <view class="trach_title">代收货款</view>
    <view class="contant">
      <view class="rows">
        <view class="lefts">
          <view class="left">货款金额</view>
          <view class="right">¥{{ order.orderList.collectionMoney}}</view>
        </view>

        <view class="lefts">
          <view class="left">返还周期</view>
          <view class="right">{{order.orderList.returnCycle == '1'?'几日退':(order.orderList.returnCycle == '2'?'三日返':'月结') }}</view>
        </view>
      </view>
      <view class="row">
        <view class="left">返还方式</view>
        <view class="right">{{returnType() }}</view>
      </view>
      <view class="row" v-if="order.orderList.returnType == '2'">
        <view class="left">银行卡号</view>
        <view class="right">{{order.orderList.returunAccount }}}</view>
      </view>
      <view class="row" v-if="order.orderList.returnType == '1' || order.orderList.returnType == '3'">
        <view class="left">手机号</view>
        <view class="right">12345678911</view>
      </view>
    </view>
  </view>
  <view class="h_card base">
    <view class="trach_title">更多服务</view>
    <view class="contant">

      <view class="row">
        <view class="left">单据服务</view>
        <view class="right">{{bill() }}</view>
      </view>
      <view class="row">
        <!-- TODO isPacking 丢失字段 -->
        <view class="left">包装服务</view>
        <view class="right">是</view>
      </view>
    </view>
  </view>
  <view class="h_card base" v-if="order.orderList.clearingForm == '3'">
    <view class="trach_title">签单信息</view>
    <view class="contant">
      <view class="row">
        <view class="left">签单单位</view>
        <view class="right">{{ companyInfo.customerName }}</view>
      </view>
      <view class="row">
        <view class="left">结算地</view>
        <view class="right">{{ companyInfo.companyName }}</view>
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import Taro, { useDidShow } from "@tarojs/taro";
import useMyOrderStore from "@/store/myOrder";
import useUserInfoStore from "@/store/user";
import dayjs from "dayjs";
import { ref,defineEmits } from 'vue'
import {getSignUnit} from "@/@api";
const order = useMyOrderStore();
const userStore = useUserInfoStore();
const emit = defineEmits(['showSignInfo'])
const companyInfo = ref<any>({customerName:'',companyName:''})

useDidShow(async ()=>{
  let qdCom = await getSignUnit({
    customerCode: userStore.userInfo.customerCode,
  })
  companyInfo.value = qdCom && qdCom.length ? qdCom[0] : {customerName:'',companyName:''}
})

function showSignInfo(item:any) {
  emit('showSignInfo',item)
}
//承运类型分类
function TransSendType() {
  if (order.orderList.sendType == "1") {
    return "快件";
  } else if (order.orderList.sendType == "2") {
    return "普件";
  } else if (order.orderList.sendType == "3") {
    return "整车";
  } else if (order.orderList.sendType == "4") {
    return "560经济件";
  } else if (order.orderList.sendType == "5") {
    return "560商务件";
  } else if (order.orderList.sendType == "6") {
    return "次日达";
  } else {
    return "隔日达";
  }
}
function goodsType() {
  if (order.orderList.goodsType == "0") {
    return "无";
  } else if (order.orderList.goodsType == "1") {
    return "送商超";
  } else if (order.orderList.goodsType == "2") {
    return "进仓";
  } else if (order.orderList.goodsType == "3") {
    return "报关";
  }
}
function timeCount() {
  if (order.orderList.isReceiving == "0") {
    return;
  }
  let timeArr = order.orderList.receivingTime.split("&&");
  return  dayjs(timeArr[0]).format("YYYY-MM-DD HH:mm:ss") + '~' + dayjs(timeArr[1]).format("YYYY-MM-DD HH:mm:ss")
}
function returnType() {
  if (order.orderList.returnType == "1") {
    return "会员卡";
  } else if (order.orderList.returnType == "2") {
    return "银行卡";
  } else if (order.orderList.returnType == "3") {
    return "微信";
  } else if (order.orderList.returnType == "4") {
    return "现金";
  }
  else if (order.orderList.returnType == "5") {
    return "支付宝";
  }
}
function bill() {
  if (!order.orderList.billServer) {
    return "无";
  }
  if (
    order.orderList.billServer.indexOf("1") != -1 &&
    order.orderList.billServer.indexOf("2") != -1
  ) {
    return "附单据，资料；承运单";
  } else if (
    order.orderList.billServer.indexOf("3") != -1 &&
    order.orderList.billServer.indexOf("2") != -1
  ) {
    return "承运单；附厂单，资料单据服务";
  } else if (
    order.orderList.billServer.indexOf("3") == -1 &&
    order.orderList.billServer.indexOf("2") != -1 &&
    order.orderList.billServer.indexOf("1") == -1
  ) {
    return "承运单";
  }
}
</script>
<style lang="scss">
.success_contant {
  margin-top: 24rpx;
  padding-bottom: 24rpx;
  box-sizing: border-box;
  .rows {
    border-bottom: 1rpx solid #f5f5f5;
    height: 127rpx;
  }
  .row {
    height: 128rpx;
    width: 100%;
    padding: 27rpx;
    box-sizing: border-box;
    display: flex;
    image {
      width: 84rpx;
      height: 84rpx;
      margin-right: 15rpx;
    }
    .text {
      .h {
        display: flex;
        align-items: center;
        font-family: PingFang SC;
        font-size: 32rpx;
        font-weight: 700;
        color: #252525;

        .name {
          margin-right: 24rpx;
        }
        .phone {
        }
      }
      .t {
        font-family: PingFang SC;
        font-size: 24rpx;
        color: #666666;
        max-width: 540rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  .success_div {
    width: 654rpx;
    border-radius: 8rpx;
    margin: 0 24rpx;
    background: #f5f5f5;
    padding: 24rpx;
    padding-top: 32rpx;
    box-sizing: border-box;
    .success_div_row {
      display: flex;
      align-items: center;
      font-family: PingFang SC Medium;
      font-size: 22rpx;
      color: #252525;
      margin-bottom: 16rpx;
      .success_div_row_right {
        color: #0966ff;
      }
    }
  }
}
.trach_title {
  width: 702rpx;
  height: 95rpx;
  display: flex;
  align-items: center;
  font-family: PingFang SC;
  font-size: 32rpx;
  font-weight: 700;
  color: #252525;
  border-bottom: 1rpx solid #f4f5f6;
}
.base {
  padding: 24rpx;
  box-sizing: border-box;
  margin-top: 24rpx;
  padding-top: 0;
  .contant {
    .send_row {
      position: relative;
      width: 100%;
      height: 176rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;

      image {
        width: 108rpx;
        height: 108rpx;
        margin-right: 16rpx;
      }
      .text {
        height: 112rpx;
        width: 334rpx;
        .text1 {
          font-weight: 700;
          font-family: PingFangSC-Semibold;
          font-size: 28rpx;
          color: #252525;
        }
        .text2 {
          font-family: PingFang SC;
          font-size: 22rpx;
          color: #666666;
          margin-bottom: 16rpx;
          width: 300rpx;
          height: 30rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .text3 {
          font-family: PingFang SC;
          font-size: 22rpx;
          color: #666666;
        }
      }
      .icon_group {
        display: flex;
        height: 100%;
        align-items: center;
        image {
          width: 64rpx;
          height: 64rpx;
        }
      }
    }
    .rows {
      margin-top: 24rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .lefts {
        display: flex;
        align-items: center;
        .left {
          font-family: PingFang SC Medium;
          font-size: 26rpx;
          color: #999999;
          margin-right: 40rpx;
        }
        .right {
          font-family: PingFang SC Medium;
          font-size: 26rpx;

          color: #252525;
          width: 170rpx;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
    .row {
      margin-top: 24rpx;
      display: flex;
      align-items: center;
      .left {
        font-family: PingFang SC Medium;
        font-size: 26rpx;
        color: #999999;
        margin-right: 40rpx;
      }
      .right {
        font-family: PingFang SC Medium;
        font-size: 26rpx;

        color: #252525;
      }
    }
    .base_div {
      margin-top: 24rpx;
      width: 654rpx;
      height: 100rpx;
      border-radius: 16rpx;
      background: #f4f5f6;
      display: flex;
      align-items: center;
      image {
        width: 40rpx;
        height: 40rpx;
        margin-right: 20rpx;
        margin-left: 24rpx;
      }
      .text {
        .top {
          font-family: PingFang SC;
          font-size: 24rpx;
          font-weight: normal;

          /* 文字3 */
          color: #999999;
        }
        .bottom {
          font-family: PingFang SC;
          font-size: 24rpx;

          color: #252525;
        }
      }
    }
    .sign_man {
      width: 100%;
      background-color: #f5f5f5;
      height: 100rpx;
      box-sizing: border-box;
      border-radius: 8rpx;
      display: flex;
      align-items: center;
      padding: 0 28rpx 0 24rpx;
      margin-top: 24rpx;
      .img {
        width: 40rpx;
        height: 40rpx;
      }
      .info {
        width: 116rpx;
        color: #0966ff;
        font-size: 22rpx;
      }
      .content {
        width: calc(100% - 176rpx);
        margin-left: 20rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .top {
          width: 100%;
          font-size: 24rpx;
          color: #999;
        }
        .bottom {
          width: 100%;
          margin-top: 12rpx;
          font-size: 24rpx;
          color: #252525;
        }
      }
    }
  }
}
.track_goods {
  padding: 24rpx;
  padding-top: 0;
  box-sizing: border-box;
  margin-top: 24rpx;

  .goods_div {
    width: 654rpx;
    height: 88rpx;
    border-radius: 8rpx;
    background: #f4f5f6;
    padding: 24rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    .goods_content {
      width: 606rpx;
      height: 87rpx;
      border-bottom: 1rpx solid rgba(0, 0, 0, 0.06);
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left {
        font-family: PingFang SC;
        font-size: 26rpx;
        color: #252525;
      }
    }
  }
}
.pickupcode {

}
</style>
